@{
    ViewData["Title"] = "出货检验管理";
}

<!-- 直接引入所有必要的CSS和JS文件 -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<!-- 自定义样式 -->
<style>
    /* 全局样式重置和优化 */
    * {
        box-sizing: border-box;
    }
    
    .outgoing-container {
        padding: 20px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    }
    
    /* 搜索卡片样式优化 */
    .search-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        margin-bottom: 20px;
        border: none;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .search-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }
    
    .search-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    
    .search-form {
        padding: 30px;
        background: #fff;
        border-radius: 12px;
    }
    
    .search-form .layui-form-label {
        color: #2c3e50;
        font-weight: 500;
        width: 100px;
        text-align: right;
        font-size: 14px;
        padding: 9px 15px;
    }
    
    .search-form .layui-input, 
    .search-form .layui-select {
        border: 2px solid #e8ecf4;
        background: #fff;
        color: #2c3e50;
        border-radius: 8px;
        padding: 0 15px;
        transition: all 0.3s ease;
        font-size: 14px;
        height: 42px;
        line-height: 42px;
    }
    
    .search-form .layui-input:focus, 
    .search-form .layui-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
        outline: none;
    }
    
    .search-form .layui-input::placeholder {
        color: #a0a8b8;
        font-size: 13px;
    }
    
    .search-form .layui-btn {
        border-radius: 8px;
        font-weight: 500;
        padding: 0 25px;
        height: 42px;
        line-height: 42px;
        transition: all 0.3s ease;
        font-size: 14px;
        border: none;
    }
    
    .search-form .layui-btn-normal {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }
    
    .search-form .layui-btn-normal:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(102,126,234,0.3);
    }
    
    .search-form .layui-btn-primary {
        background: #f8f9fa;
        color: #6c757d;
        border: 2px solid #e8ecf4;
    }
    
    .search-form .layui-btn-primary:hover {
        background: #e9ecef;
        border-color: #dee2e6;
        transform: translateY(-1px);
    }
    
    /* 数据卡片样式优化 */
    .data-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        overflow: hidden;
        border: none;
        position: relative;
    }
    
    .data-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    }
    
    .data-card-body {
        padding: 25px;
    }
    
    /* 操作按钮栏优化 */
    .action-bar {
        margin-bottom: 20px;
        padding: 0;
        border-bottom: none;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .action-bar .layui-btn {
        border-radius: 8px;
        font-weight: 500;
        margin-right: 0;
        height: 36px;
        line-height: 36px;
        padding: 0 18px;
        transition: all 0.3s ease;
        border: none;
        font-size: 13px;
    }
    
    .action-bar .layui-btn-normal {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: #fff;
    }
    
    .action-bar .layui-btn-normal:hover {
        background: linear-gradient(135deg, #0e8578 0%, #32d66a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(17,153,142,0.3);
    }
    
    .action-bar .layui-btn:hover {
        transform: translateY(-1px);
    }
    
    .action-bar .layui-btn-danger:hover {
        box-shadow: 0 6px 20px rgba(255,107,107,0.3);
    }
    
    /* 表格样式优化 */
    .layui-table-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .layui-table th {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: #2c3e50;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        font-size: 13px;
        padding: 12px 8px;
    }
    
    .layui-table tbody tr {
        font-size: 13px;
        transition: all 0.2s ease;
    }
    
    .layui-table tbody tr:hover {
        background: linear-gradient(135deg, #f8f9ff 0%, #e6f3ff 100%);
        transform: scale(1.001);
    }
    
    /* 表格斑马纹效果 */
    .layui-table tbody tr:nth-child(even) {
        background: linear-gradient(135deg, #fafbfc 0%, #f1f3f5 100%);
    }
    
    .layui-table tbody tr:nth-child(even):hover {
        background: linear-gradient(135deg, #f0f4ff 0%, #e1efff 100%);
    }
    
    /* 状态标签样式优化 */
    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        border: none;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .status-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }
    
    .status-badge:hover::before {
        left: 100%;
    }
    
    .status-qualified {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: #fff;
    }
    
    .status-unqualified {
        background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
        color: #fff;
    }
    
    .status-pending {
        background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
        color: #fff;
    }
    
    /* 操作按钮样式优化 */
    .action-btn {
        margin-right: 6px;
        border-radius: 6px;
        font-size: 12px;
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
        transition: all 0.3s ease;
        border: none;
        position: relative;
        overflow: hidden;
    }
    
    .action-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }
    
    .action-btn:hover::before {
        width: 120%;
        height: 120%;
    }
    
    .action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    /* 搜索区域样式调整 */
    .search-form .layui-form-item {
        margin-bottom: 20px;
    }
    
    .search-form .layui-input-block {
        margin-left: 110px;
    }
    
    /* 按钮区域样式 */
    .search-buttons {
        text-align: center;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 2px solid #f1f3f5;
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    .search-buttons .layui-btn {
        margin: 0;
        min-width: 120px;
    }
    
    /* 响应式设计 */
    @@media (max-width: 768px) {
        .outgoing-container {
            padding: 15px;
        }
        
        .search-form {
            padding: 20px;
        }
        
        .search-form .layui-input-block {
            margin-left: 0;
            margin-top: 5px;
        }
        
        .search-form .layui-form-label {
            width: 100%;
            text-align: left;
            padding: 5px 0;
        }
        
        .search-buttons {
            flex-direction: column;
            align-items: center;
        }
        
        .search-buttons .layui-btn {
            width: 100%;
            max-width: 200px;
        }
        
        .action-bar {
            flex-direction: column;
        }
        
        .action-bar .layui-btn {
            width: 100%;
            margin-bottom: 8px;
        }
    }
    
    /* 加载动画优化 */
    .layui-table-loading {
        background: rgba(255,255,255,0.9);
        backdrop-filter: blur(5px);
    }
    
    /* 分页样式优化 */
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    /* 下拉选择框优化 */
    .layui-form-select .layui-select-title {
        border: 2px solid #e8ecf4;
        border-radius: 8px;
        height: 42px;
        line-height: 38px;
        padding: 0 15px;
        transition: all 0.3s ease;
    }
    
    .layui-form-select .layui-select-title:hover {
        border-color: #667eea;
    }
    
    /* 复选框样式优化 */
    .layui-table-cell .layui-form-checkbox[lay-skin="primary"] i {
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    /* 工具提示样式 */
    .layui-layer-tips {
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    /* 滚动条样式优化 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    }
    
    /* 表格空数据状态 */
    .layui-table-body .layui-none {
        color: #999;
        font-size: 14px;
        padding: 40px 0;
    }
    
    /* 数据表格容器样式 */
    .layui-table-view {
        border-radius: 8px;
        overflow: hidden;
        border: none;
    }
    
    .layui-table-header,
    .layui-table-body {
        border-radius: 0;
    }
    
    /* 卡片标题样式 */
    .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f3f5;
        position: relative;
    }
    
    .card-title::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }
</style>

<div class="outgoing-container">
    <!-- 搜索区域 -->
    <div class="search-card">
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm" id="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">检验单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="outgoingCode" placeholder="请输入出货检验单编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="customer" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">批次号</label>
                            <div class="layui-input-block">
                                <input type="text" name="batch" placeholder="请输入批次号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="productCode" placeholder="请输入产品编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="productName" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">检测结果</label>
                            <div class="layui-input-block">
                                <select name="testingResult" lay-filter="testingResult">
                                    <option value="">请选择检测结果</option>
                                    <option value="合格">合格</option>
                                    <option value="不合格">不合格</option>
                                    <option value="待检验">待检验</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="search-buttons">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="data-card">
        <div class="data-card-body">
            <!-- 操作按钮栏 -->
            <div class="action-bar">
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="addBtn">
                    <i class="layui-icon layui-icon-add-1"></i> 新增
                </button>
                <button class="layui-btn layui-btn-sm" id="editBtn">
                    <i class="layui-icon layui-icon-edit"></i> 编辑
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteBtn">
                    <i class="layui-icon layui-icon-delete"></i> 删除
                </button>
            </div>

            <!-- 数据表格 -->
            <table class="layui-hide" id="outgoingTable" lay-filter="outgoingTable"></table>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs action-btn" lay-event="edit" title="编辑">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs action-btn" lay-event="del" title="删除">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<!-- 状态列模板 -->
<script type="text/html" id="stateTpl">
    {{# if(d.state == 1) { }}
        <span class="status-badge status-qualified">已完成</span>
    {{# } else { }}
        <span class="status-badge status-pending">待检验</span>
    {{# } }}
</script>

<!-- 检测结果模板 -->
<script type="text/html" id="testingResultTpl">
    {{# if(d.testingResult == '合格') { }}
        <span class="status-badge status-qualified">合格</span>
    {{# } else if(d.testingResult == '不合格') { }}
        <span class="status-badge status-unqualified">不合格</span>
    {{# } else { }}
        <span class="status-badge status-pending">{{d.testingResult || '待检验'}}</span>
    {{# } }}
</script>

<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 数据表格配置
        var tableIns = table.render({
            elem: '#outgoingTable',
            url: '/ProductionSystem/OutgoingInspection/GetOutgoingInspections',
            toolbar: false,
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                { type: 'checkbox', width: 50 },
                { field: 'id', width: 60, title: 'ID', sort: true },
                { field: 'outgoingCode', title: '出货检验单编号', width: 140 },
                { field: 'outgoingName', title: '验单名称', width: 120 },
                { field: 'customer', title: '客户名称', width: 100 },
                { field: 'batch', title: '批次号', width: 100 },
                { field: 'productCode', title: '产品编码', width: 100 },
                { field: 'productName', title: '产品名称', width: 120 },
                { field: 'specifications', title: '规格型号', width: 100 },
                { field: 'unitt', title: '单位', width: 60 },
                { field: 'send', title: '发货数量', width: 80 },
                { field: 'testingNum', title: '检测数量', width: 80 },
                { field: 'unqualifiedNum', title: '不合格数', width: 80 },
                { field: 'testingResult', title: '检测结果', width: 90, templet: '#testingResultTpl' },
                { field: 'shipmentDate', title: '出货日期', width: 100, templet: function(d) {
                    return d.shipmentDate ? new Date(d.shipmentDate).toLocaleDateString() : '';
                }},
                { field: 'testingDate', title: '检测日期', width: 100, templet: function(d) {
                    return d.testingDate ? new Date(d.testingDate).toLocaleDateString() : '';
                }},
                { field: 'testingPerson', title: '检测人员', width: 100 },
                { field: 'state', title: '单据状态', width: 90, templet: '#stateTpl' },
                { fixed: 'right', title: '操作', toolbar: '#barTpl', width: 120 }
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            loading: true,
            parseData: function(res) {
                console.log('解析返回数据:', res);
                if (res.code !== 0) {
                    return {
                        "code": res.code,
                        "msg": res.msg || '数据加载失败',
                        "count": 0,
                        "data": []
                    };
                }
                return res;
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            },
            done: function (res, curr, count) {
                console.log('表格渲染完成', res);
                // 处理可能的错误
                if (res.code !== 0) {
                    layer.msg('获取数据失败：' + (res.msg || '未知错误'));
                } else if (count === 0) {
                    layer.msg('暂无数据');
                }
            },
            error: function(xhr, status, error){
                console.error('请求失败', error, xhr.responseText);
                try {
                    var errorResponse = JSON.parse(xhr.responseText);
                    layer.msg('列表加载失败：' + (errorResponse.msg || error));
                } catch (e) {
                    layer.msg('列表加载失败，请检查网络连接或服务器状态');
                }
            }
        });

        // 获取选中数据
        function getSelectedData() {
            var checkStatus = table.checkStatus('outgoingTable');
            return checkStatus.data;
        }

        // 搜索表单提交
        form.on('submit(searchBtn)', function (data) {
            var field = data.field;
            console.log('搜索条件:', field);
            
            tableIns.reload({
                where: field,
                page: { curr: 1 }
            });
            
            return false;
        });

        // 重置搜索
        $('#resetBtn').on('click', function () {
            $('#searchForm')[0].reset();
            form.render();
            tableIns.reload({
                where: {},
                page: { curr: 1 }
            });
        });

        // 新增按钮
        $('#addBtn').on('click', function () {
            layer.open({
                type: 2,
                title: '新增出货检验',
                shadeClose: true,
                shade: 0.8,
                area: ['900px', '650px'],
                content: '/ProductionSystem/OutgoingInspection/Edit'
            });
        });

        // 编辑按钮
        $('#editBtn').on('click', function () {
            var data = getSelectedData();
            if (data.length === 0) {
                layer.msg('请选择要编辑的数据');
                return;
            }
            if (data.length > 1) {
                layer.msg('只能选择一条数据进行编辑');
                return;
            }
            
            layer.open({
                type: 2,
                title: '编辑出货检验',
                shadeClose: true,
                shade: 0.8,
                area: ['900px', '650px'],
                content: '/ProductionSystem/OutgoingInspection/Edit?id=' + data[0].id
            });
        });

        // 删除按钮
        $('#deleteBtn').on('click', function () {
            var data = getSelectedData();
            if (data.length === 0) {
                layer.msg('请选择要删除的数据');
                return;
            }
            
            layer.confirm('确认删除选中的 ' + data.length + ' 条记录吗？', function (index) {
                var ids = data.map(function (item) {
                    return item.id;
                });
                
                // 逐个删除选中的数据
                var deletePromises = ids.map(function(id) {
                    return new Promise(function(resolve, reject) {
                        $.post('/ProductionSystem/OutgoingInspection/Delete/' + id, function (res) {
                            if (res.code === 0) {
                                resolve();
                            } else {
                                reject(res.msg || '删除失败');
                            }
                        }).fail(function() {
                            reject('网络错误');
                        });
                    });
                });
                
                Promise.all(deletePromises).then(function() {
                    layer.close(index);
                    layer.msg('删除成功');
                    tableIns.reload();
                }).catch(function(error) {
                    layer.msg('删除失败：' + error);
                });
            });
        });

        // 监听行工具事件
        table.on('tool(outgoingTable)', function (obj) {
            var data = obj.data;
            
            if (obj.event === 'del') {
                layer.confirm('确认删除此出货检验吗？', function (index) {
                    $.post('/ProductionSystem/OutgoingInspection/Delete/' + data.id, function (res) {
                        if (res.code === 0) {
                            obj.del();
                            layer.close(index);
                            layer.msg('删除成功');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑出货检验',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['900px', '650px'],
                    content: '/ProductionSystem/OutgoingInspection/Edit?id=' + data.id
                });
            }
        });
    });
</script> 